<template>
  <article class="page">
    <headerbar>贵阳组工信息
      <span @click="more" class="head-btn" slot="btn">第{{detail.number}}期</span>
    </headerbar>
    <section class="frame-content-sub no-bg" v-remainScroll="'groupInfoList'">
      <ul class="tab">
        <li @click="receive()" :class="{ active: tabIndex == 0 }">
          <span>组工信息</span>
        </li>
        <li @click="send()" :class="{ active: tabIndex == 1 }">
          <span>组工信息（副刊）</span>
        </li>
      </ul>
      <section class="self-height group-info">
        <h1 class="title">{{detail.groupName}}{{tabIndex === 1? '（副刊）':''}}</h1>
        <div class="no">
          <p>（{{detail.year}}）第{{detail.number}}期</p>
          <p>总第{{detail.totalNumber}}期</p>
        </div>

        <div class="group-name-line">
          <span>{{detail.deptName}}</span>
          <span class="date">{{tools.formateZh(detail.pushDate)}}</span>
        </div>

        <h2 class="list-name">目  录</h2>

        <ul class="list-name-wrap">
          <fetchData  class="bg-white" :loading="isLoading" :data="list"></fetchData>
          <li v-for="item in list">
            <div @click="goDetail(item)" class="item" :class="{'has-children':item.children}">{{item.catalogName}}</div>
            <template v-if="item.children">
              <ul class="list-name-wrap">
                <li v-for="item2 in item.children" @click="goDetail(item2)">
                  <div @click="goDetail(item2)" class="item" :class="{'has-children':item2.children}">{{item2.catalogName}}</div>
                </li>
              </ul>
            </template>
          </li>
          <noData v-if="isLoading === false && list.length === 0"></noData>
        </ul>
      </section>

    </section>
  </article>
</template>


<script>
  import _ from 'lodash'
  import moment from "moment";
  export default {
    name: 'groupInfoList',
    data () {
      return {
        year: '',
        no: '',
        list: [],
        detail: {},
        likeList: [],
        tabIndex:0,
        type:0, //type参数，0是正刊，1是副刊
        isLoading:false,
      }
    },
    created () {
      this.isLoading = true;
      this.$route.meta.keepAlive = true
      if (this.$store.state.groupInfoListCacheData) {
        this.year = this.$store.state.groupInfoListCacheData['year']
        this.no = this.$store.state.groupInfoListCacheData['no']
        this.list = this.$store.state.groupInfoListCacheData['list']
        this.detail = this.$store.state.groupInfoListCacheData['detail']
        this.likeList = this.$store.state.groupInfoListCacheData['likeList']
        return
      }
      this.year = this.$route.query.year || moment().format('YYYY')
      this.no = this.$route.query.no
      this.fetchDetail()
      this.groupInfoClick()
    },
    beforeRouteLeave(to, from, next){
      // 详情页时缓存组件
      this.$route.meta.keepAlive = ['groupInfoDetail','groupInfoList'].indexOf(to.name) !== -1
      if(this.$route.meta.keepAlive) {
        this.$store.state.groupInfoListCacheData = _.extend({}, this)
        this.$store.commit('addRoute','groupInfoList')
      }else {
        delete this.$store.state.groupInfoListCacheData
        this.$store.commit('removeRoute','groupInfoList')
      }
      next();
    },
    methods: {
      receive() {
        this.isLoading = true;
        this.type = 0;
        this.tabIndex = 0;
        this.fetchDetail();
      },
      send() {
        this.isLoading = true;
        this.type = 1;
        this.tabIndex = 1;
        this.fetchDetail();
      },
      fetchDetail () {
        this.list=[];
        this.fetchService.getgroupInfoNes({type:this.type}).then(res => {
          if(res.code === 0){
            if(res.data !=null){
              this.detail = res.data
            }else{
              this.isLoading = false;
              return
            }
            this.fetchList();
            return;
          }
        })
      },
      goDetail (item) {
        if (item.children) {
          return false
        }
        this.$store.state.newsDetail = item
        this.$router.push({name: 'groupInfoDetail', query: {id: item.contentId}})
      },
       fetchList () {
        let params = {
          groupId: this.detail.groupId,
          status: '1'
        }
        this.fetchService.catalogInfoByGroupId(params).then(res => {
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg)
          }
          this.list = res.data
          this.isLoading = false;
        })
      },
      userDept () {
        this.fetchService.userDept().then(res => {
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg)
          }
          this.likeList = res.data
        })
      },
      onSelect (data) {
        this.isLoading = true;
        this.no = data.number
        this.fetchService.groupInfoById(data.groupId).then(res => {
          this.detail = res.data
          this.list=[];
          this.fetchList()
        })
      },
      more (item) {
        let me = this
        if (!this.instance) {
          this.instance = this.$createSelectGroup({
            $events: {
              onSelect: me.onSelect
            }
          }).show()
        }
        this.instance.setData(this.detail.year, this.detail.number,this.type)
        this.instance.show()
      },
      groupInfoClick () {
        let data = {
          clickType: '0'
        }
        this.fetchService.groupInfoClickAdd(data).then(res => {
          if (res.code !== 0) {
            this.tools.tip(res.message)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
